<template>
  <view class="container">
    <!-- 帖子详情 -->
    <view class="post-card" v-if="post">
      <view class="author-info">
        <image :src="post.data.result.avatar" class="avatar" />
        <view class="author-right">
          <text class="username">{{ post.data.result.nickName }}</text>
         <text class="post-time">{{ post.data.result.gmtCreated }}</text>
        </view>
      </view>

      <view class="content">
        <text>{{ post.data.result.content }}</text>
        <image 
          v-for="(img, index) in post.data.result.fileRecordDO" 
          :key="index" 
          :src="img.fileKey" 
          class="post-image" 
          mode="aspectFill"
        />
      </view>

      <!-- 点赞和评论 -->
      <view class="post-actions">
        <view class="likes" @click="toggleLike">
      				<uni-icons v-if="post.data.result.like === '1' " type="hand-up-filled" size="30"></uni-icons>
      				<uni-icons v-else type="hand-up" size="30"></uni-icons>
          <text>{{ post.data.result.thumbs }}</text>
        </view>
      	<view class="likes" @click="toggleCollect">
      		<uni-icons v-if="post.data.result.collection === '0'" type="star" size="30"></uni-icons>
      		<uni-icons v-else type="star-filled" size="30"></uni-icons>
      		<text>{{ post.data.result.collect }}</text>
      	</view>
      	<view class="likes">
      		<uni-icons type="chat" size="30"></uni-icons>
      		<text>{{ commentCount }}</text>
      	</view>
      </view>
    </view>

    <!-- 评论列表 -->
    <view class="comment-list">
      <view class="comment-item" v-for="comment in comments" :key="comment.id">
        <image :src="comment.user.avatar" class="comment-avatar" />
        <view class="comment-content">
          <text class="comment-user">{{ comment.user.username }}</text>
          <text class="comment-text">{{ comment.content }}</text>
          <text class="comment-time">{{ formatTime(comment.createdAt) }}</text>
        </view>
      </view>
    </view>

    <!-- 评论输入框 -->
    <view class="comment-input">
      <input 
        v-model="newComment" 
        placeholder="写下你的评论..." 
        @confirm="submitComment"
      />
      <button class="send-btn" @click="submitComment">发送</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const post = ref({})
const postUser = ref({})
const isLiked = ref(false); // 点赞状态
const isCollect = ref(false); // 收藏状态
const commentCount = ref(30); // 评论数量
onLoad((e)=>{
  console.log("页面传递来的参数是",e)	
  getTaskById(e.taskId)
})

const getTaskById=(taskId)=>{
	uni.request({
		url: "http://localhost:8081/sysDynamics/postsById/"+taskId,
		method: 'POST',
		header: {
			'Authorization': 'Bearer ' + uni.getStorageSync('token') // 从本地存储获取token
		}
	}).then((res) => {
		if (res.data.code === '200') {
			console.log("结果为", res)
			post.value=res
			console.log("替换之后结果为", post)
		} else {
			console.log("结果为", res)
			uni.showToast({
				title: res.data.message || '获取帖子失败',
				icon: 'none'
			})
		}
	})
}

const toggleLike = () => {
	getTaskById(post.value.data.result.id)
}
// 点赞切换
const toggleCollect = () => {
  isCollect.value = !isCollect.value;
  collectsCount.value += collectsCount.value ? 1 : -1;
}
// 模拟当前登录用户
const currentUser = ref({
  id: 1001,
  username: '当前用户',
  avatar: 'https://picsum.photos/50/50?1'
})


// 模拟评论数据
const comments = ref([
  {
    id: 1,
    content: '这个帖子很棒！',
    createdAt: '2024-03-15 10:00:00',
    user: {
      id: 1003,
      username: '用户A',
      avatar: 'https://picsum.photos/50/50?3'
    }
  },
  {
    id: 2,
    content: '感谢分享！',
    createdAt: '2024-03-15 10:05:00',
    user: {
      id: 1004,
      username: '用户B',
      avatar: 'https://picsum.photos/50/50?4'
    }
  }
])


const newComment = ref('')
const submitComment = () => {
  
}
//  上面是假数据

onLoad((options) => {
  postId.value = options.id
  loadPost()
  loadComments()
})

// 加载帖子详情
const loadPost = async () => {
  const res = await uni.request({
    url: `/api/posts/${postId.value}`,
    method: 'GET'
  })
  post.value = res.data.data
}

// 加载评论
const loadComments = async () => {
  const res = await uni.request({
    url: `/api/posts/${postId.value}/comments`,
    method: 'GET'
  })
  comments.value = res.data.data
}
// 时间格式化
const formatTime = (timeStr) => {
  return dayjs(timeStr).format('YYYY-MM-DD HH:mm')
}

// // 提交评论
// const submitComment = async () => {
//   if (!newComment.value.trim()) return
  
//   await uni.request({
//     url: `/api/posts/${postId.value}/comments`,
//     method: 'POST',
//     data: { content: newComment.value }
//   })
  
//   newComment.value = ''
//   loadComments()
//   post.value.commentCount++
// }


</script>

<style scoped>
.likes,
.comments {
	  display: flex;
	  align-items: center;
	}
.post-actions {
	  display: flex;
	  justify-content: space-between;
	  margin-bottom: 15px;
	}
.container {
  padding: 20rpx;
}

.post-card {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.author-info {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.author-right {
  flex: 1;
}

.username {
  font-size: 32rpx;
  color: #333;
  display: block;
}

.post-time {
  font-size: 24rpx;
  color: #999;
}

.follow-btn {
  font-size: 28rpx;
  padding: 8rpx 30rpx;
  border-radius: 40rpx;
  background: #f0f0f0;
}

.follow-btn.followed {
  background: #e0e0e0;
  color: #666;
}

.content {
  margin-bottom: 30rpx;
}

.post-image {
  width: 100%;
  height: 400rpx;
  border-radius: 16rpx;
  margin-top: 20rpx;
}

.action-bar {
  display: flex;
  gap: 40rpx;
  padding-top: 20rpx;
  border-top: 1rpx solid #eee;
}

.action-item {
  display: flex;
  align-items: center;
  gap: 10rpx;
  color: #666;
}

.comment-list {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
}

.comment-item {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.comment-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.comment-content {
  flex: 1;
}

.comment-user {
  font-size: 28rpx;
  color: #666;
  margin-right: 15rpx;
}

.comment-text {
  font-size: 28rpx;
  color: #333;
}

.comment-time {
  display: block;
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.comment-input {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 20rpx;
  display: flex;
  align-items: center;
  gap: 20rpx;
  border-top: 1rpx solid #eee;
}

.comment-input input {
  flex: 1;
  height: 80rpx;
  padding: 0 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 40rpx;
}

.send-btn {
  background: #007AFF;
  color: white;
  padding: 0 40rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
}
</style>